<template>
	<view style="padding-top: 100rpx;">
		<view class="text-area">
			<text>输入值：</text>
			<input type="text" v-model="title" style="color: red; background: #ccc;" />
		</view>
		<view class="text-area">
			<text>回传值：</text>
			<input type="text" :value="callBackValue" style="color: blue;background: #ccc;border: 1px solid #e0e0e0;" />
		</view>
		<comA :intent="title"></comA>
		<comB @callBackFun="callBack"></comB>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import comA from '../../components/compA.vue';
	import comB from '../../components/compB.vue';

	const title = ref('');
	const callBackValue = ref('');

	const callBack = (value) => {
		callBackValue.value = value;
	};
</script>

<style>
	.page-title {
		font-size: 40rpx;
		font-weight: bold;
		text-align: center;
		margin: 30rpx 0;
	}
	.text-area {
		margin: 2rpx 50rpx;
		display: flex;
		align-items: center;
		gap: 8rpx;
		margin-bottom: 20rpx; 
	}
	input {
		padding: 12rpx; 
		border: none;
		border-radius: 4rpx;
		flex: 1;
	}
</style>